<template>
    <div class="page-container">
      <page-header title="中国能源有限公司OA项目合同">
        <a-space>
          <a-button>终止</a-button>
          <a-button>冻结</a-button>
          <a-button type="primary">项目开始</a-button>
        </a-space>
      </page-header>

      <div class="page-card">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="计划">
              <div style="background-color: #ececec; padding: 20px;">
                <a-row :gutter="16">
                    <a-col :span="6">
                        <a-row :gutter="16">
                            <a-col :span="6">
                                合同进度
                            </a-col>
                            <a-col :span="12">
                            <a-progress :percent="40" />
                            </a-col>
                        </a-row>
                    </a-col>
                    <a-col :span="4">
                        <a-row :gutter="16">
                            <a-col :span="8">
                                完成计划
                            </a-col>
                            <a-col :span="6">
                            <a-tag color="blue">
                                13个
                            </a-tag>
                            </a-col>
                        </a-row>
                        
                    </a-col>
                    <a-col :span="4">
                        <a-row :gutter="16">
                            <a-col :span="10">
                                未完成计划
                            </a-col>
                            <a-col :span="6">
                           <a-tag color="blue">
                                13个
                            </a-tag>
                            </a-col>
                        </a-row>
                        
                    </a-col>
                    <a-col :span="4">
                        <a-row :gutter="16">
                            <a-col :span="8">
                                超期计划
                            </a-col>
                            <a-col :span="6">
                           <a-tag color="blue">
                                13个
                            </a-tag>
                            </a-col>
                        </a-row>
                        
                    </a-col>
                    <a-col :span="4">
                        <a-row :gutter="16">
                            <a-col :span="12">
                                距离截止日剩
                            </a-col>
                            <a-col :span="6">
                           <a-tag color="red">
                                13个
                            </a-tag>
                            </a-col>
                        </a-row>
                        
                    </a-col>
                </a-row>
            </div>


            <div class="table-filter border-0">
              <div class="filter-left">
                <div class="filter-row">
                  <div class="row-title">计划状态：</div>
                  <div class="row-content">
                    <div v-for="(item,index) in filters1" :key="index" class="row-checkbox">
                      <a-checkbox>
                        {{ item.title }}
                      </a-checkbox>
                    </div>
                  </div>
                </div>
              </div>

            <div class="filter-left">
                <div class="filter-row">
                  <div class="row-title">日期范围：</div>
                  <div class="row-content">
                    <a-range-picker style="width: 100%" :placeholder="['开始时间','结束时间']"></a-range-picker>
                  </div>
                </div>
              </div>
              <div class="filter-right">
                <div class="filter-search">
                  <a-input-search placeholder="输入项目名称" />
                </div>
              </div>
              <div class="filter-right">
                  <div class="filter-search" style="text-align:right;">
                  <a-button type="primary">
                    创建计划
                </a-button>
                </div>
                
              </div>
            </div>
             <a-list :grid="{ gutter: 16, xs: 2, sm: 2, md: 2, lg: 2, xl: 2, xxl: 2 }" :data-source="planList">
                <a-list-item slot="renderItem" slot-scope="item">
                <a-card>
                    <a-descriptions :title="item.title" bordered>
                        <a-descriptions-item label="负责人" :span="12">
                            {{ item.name }}
                        </a-descriptions-item>
                        <a-descriptions-item label="开始时间" :span="2">
                            {{ item.createTime }}
                        </a-descriptions-item>
                        <a-descriptions-item label="截止时间" >
                            {{ item.endTime }}
                            <a-tag
                                :color="item.createTime > item.endTime ? 'volcano' : 'green'"
                            >
                            {{ item.createTime > item.endTime ? '超期' : '未超期' }}
                            </a-tag>
                        </a-descriptions-item>
                        <a-descriptions-item label="负责人" :span="12">
                            <a-progress :percent="item.progress" />
                        </a-descriptions-item>
                        <a-descriptions-item label="计划说明" :span="12">
                            {{ item.description }}
                        </a-descriptions-item>
                    </a-descriptions>
                </a-card>
                </a-list-item>
            </a-list>
            
          </a-tab-pane>

          

          

          <a-tab-pane key="4" tab="里程碑">
            <a-steps :current="4">
                <a-step title="需求分析" sub-title="2021-06-09" description="已完成" />
                <a-step title="系统设计" sub-title="2021-06-09" description="已完成" />
                <a-step title="测试" sub-title="2021-06-09" description="已完成" />
                <a-step title="上线" sub-title="2021-06-09" description="已完成" />
                <a-step title="验收" sub-title="2021-06-09" description="已完成" />
            </a-steps>
            <div class="filter-right margin-t20">
                  <div class="filter-search" style="text-align:right;">
                  <a-button type="primary">
                    添加里程碑
                </a-button>
                </div>
                
              </div>
            <a-table :columns="columns5" :data-source="data5" bordered :pagination="false" class="margin-t20">
              <span slot="handle">
                <span class="red hover margin-r20">删除</span>
                <span class="blue hover">编辑</span>
              </span>
            </a-table>
          </a-tab-pane>

          <a-tab-pane key="5" tab="详情">
            <a-row class="padding-tb10" :span="2">
              <a-col :span="2" class="text-c">
                编号:
              </a-col>
              <a-col :span="10">
                <div class="border-bottom padding-b10">GC2028855539299</div>
              </a-col>
              <a-col :span="2" class="text-c">
                预编号:
              </a-col>
              <a-col :span="10">
                <div class="border-bottom padding-b10">GC2028855539299</div>
              </a-col>
            </a-row>

            <a-row class="padding-tb10">
              <a-col :span="2" class="text-c">
                合同名称:
              </a-col>
              <a-col :span="22">
                <div class="border-bottom padding-b10">中国能源有限公司OA项目 <a-tag color="blue">执行中</a-tag></div>
              </a-col>
            </a-row>
            <a-row class="padding-tb10">
              <a-col :span="2" class="text-c">
                归属项目:
              </a-col>
              <a-col :span="22">
                <div class="border-bottom padding-b10 blue">中国能源有限公司OA项目 </div>
              </a-col>
            </a-row>
            <a-row class="padding-tb10">
              <a-col :span="2" class="text-c">
                合同类型:
              </a-col>
              <a-col :span="22">
                <div class="border-bottom padding-b10">产品实施类</div>
              </a-col>
            </a-row>
            <a-row class="padding-tb10" :span="2">
              <a-col :span="2" class="text-c">
                开始日期:
              </a-col>
              <a-col :span="10">
                <div class="border-bottom padding-b10"><a-date-picker @change="onChange" /></div>
              </a-col>
              <a-col :span="2" class="text-c">
                结束日期:
              </a-col>
              <a-col :span="10">
                <div class="border-bottom padding-b10"><a-date-picker @change="onChange" /></div>
              </a-col>
            </a-row>
            <a-row class="padding-tb10" :span="2">
              <a-col :span="2" class="text-c">
                创建日期:
              </a-col>
              <a-col :span="10">
                <div class="border-bottom padding-b10"><a-date-picker @change="onChange" /></div>
              </a-col>
              <a-col :span="2" class="text-c">
                确立日期:
              </a-col>
              <a-col :span="10">
                <div class="border-bottom padding-b10"><a-date-picker @change="onChange" /></div>
              </a-col>
            </a-row>
            <a-row class="padding-tb10" :span="2">
              <a-col :span="2" class="text-c">
                优先级:
              </a-col>
              <a-col :span="10">
                <div class="border-bottom padding-b10">高</div>
              </a-col>
              <a-col :span="2" class="text-c">
                紧急程度:
              </a-col>
              <a-col :span="10">
                <div class="border-bottom padding-b10">非常紧急</div>
              </a-col>
            </a-row>
            <a-row class="padding-tb10" :span="2">
              <a-col :span="2" class="text-c">
                负责人:
              </a-col>
              <a-col :span="10">
                <div class="border-bottom padding-b10">李四</div>
              </a-col>
              <a-col :span="2" class="text-c">
                项目监控人:
              </a-col>
              <a-col :span="10">
                <div class="border-bottom padding-b10">张总</div>
              </a-col>
            </a-row>

            <a-row class="padding-tb10">
              <a-col :span="2" class="text-c">
                参与人:
              </a-col>
              <a-col :span="22">
                <div class="border-bottom padding-b10 blue">张三、李四、王五、赵六、胡七，华八、等20人</div>
              </a-col>
            </a-row>

            <a-row class="padding-tb10">
              <a-col :span="2" class="text-c">
                签约方:
              </a-col>
              <a-col :span="22">
                <div class="border-bottom padding-b10">
                  <a-tag>云南能投集团</a-tag>
                  <a-tag>云南城投集团</a-tag>
                </div>
              </a-col>
            </a-row>

            <a-row class="padding-tb10">
              <a-col :span="2" class="text-c">
                材料附件:
              </a-col>
              <a-col :span="22">
                <div class="border-bottom padding-b10">
                  <a-tag>项目需求20211201.doc</a-tag>
                  <a-tag>客户访问记录.doc</a-tag>
                </div>
              </a-col>
            </a-row>

            <a-row class="padding-tb10">
              <a-col :span="2" class="text-c">
                合同说明:
              </a-col>
              <a-col :span="22">
                <div class="border padding-10">
                  说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字
                </div>
              </a-col>
            </a-row>
            <a-row class="padding-tb10">
              <a-col :span="2" class="text-c">
                条款:
              </a-col>
              <a-col :span="22">
                <div class="border padding-10">
                    <a-tag class="aTag">明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</a-tag>
                    <a-tag class="aTag">明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</a-tag>
                    <a-tag class="aTag">明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</a-tag>
                </div>
              </a-col>
            </a-row>
            <a-row class="padding-tb10">
              <a-col :span="2" class="text-c">
                采招:
              </a-col>
              <a-col :span="22">
                <div class="border padding-10">
                    <div class="table-filter border-0">
                        <div class="filter-left">
                            <a-tag class="aTag" style="width:auto;">采招方：云南xxxxxxxxxxxxxxxx公司</a-tag>
                        </div>
                         <div class="filter-right text-r">
                            <a-tag class="aTag" color="#87d068" style="width:auto;">已采招</a-tag>
                        </div>
                    </div>
                   
                    <p>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>
                    <a>附件.jpg</a>
                </div>
              </a-col>
            </a-row>
            <a-row class="padding-tb10">
              <a-col :span="2" class="text-c">
                法审:
              </a-col>
              <a-col :span="22">
                <div class="border padding-10">
                    <div class="table-filter border-0">
                        <div class="filter-left">
                            <a-tag class="aTag" style="width:auto;">采招方：云南xxxxxxxxxxxxxxxx公司</a-tag>
                        </div>
                         <div class="filter-right text-r">
                            <a-tag class="aTag" color="#87d068" style="width:auto;">已法审</a-tag>
                        </div>
                    </div>
                   
                    <p>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>
                    <a>附件.jpg</a>
                </div>
              </a-col>
            </a-row>
            <a-row class="padding-tb10">
              <a-col :span="2" class="text-c">
                签约:
              </a-col>
              <a-col :span="22">
                <div class="border padding-10">
                    <div class="table-filter border-0">
                        <div class="filter-left">
                            <a-tag class="aTag" style="width:auto;">采招方：云南xxxxxxxxxxxxxxxx公司</a-tag>
                        </div>
                         <div class="filter-right text-r">
                            <a-tag class="aTag" color="#87d068" style="width:auto;">已签约</a-tag>
                        </div>
                    </div>
                   
                    <p>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>
                    <a>附件.jpg</a>
                </div>
              </a-col>
            </a-row>
            <a-row class="padding-tb10">
              <a-col :span="2" class="text-c">审批情况:</a-col>
              <a-col :span="22">
                <div class="border-bottom padding-b10 blue border-0">
                    <span>确立审批</span>
                    <a-tag color="#87d068" class="margin-l10">已通过</a-tag>
                </div>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="3" tab="费用">
            <div class="table-filter" style="border:none;flex-direction:none;justify-content:none">
              <div class="filter-left" style="flex:initial;margin-right:10px">
                <div class="filter-row">
                  <div class="row-title">
                      <a>按月度</a>
                  </div>
                </div>
              </div>
              <div class="filter-left" style="flex:initial;margin-right:10px">
                <div class="filter-row">
                  <div class="row-title">
                      <a>按季度</a>
                    </div>
                </div>
              </div>
              <div class="filter-left" style="flex:initial;margin-right:10px">
                <div class="filter-row">
                  <div class="row-title">
                      <a>明细</a>
                    </div>
                </div>
              </div>
              <div class="filter-right" style="margin-left:auto">
                  <div class="filter-search" style="text-align:right;">
                  <a-button type="primary">
                    添加明细
                </a-button>
                </div>
                
              </div>
            </div>
              
            <a-table :columns="columns3" :data-source="data3" bordered :pagination="false">
            </a-table>
          </a-tab-pane>
            <a-tab-pane key="2" tab="资料">
                <div class="filter-right">
                  <div class="filter-search" style="text-align:right;">
                  <a-button type="primary">
                    添加资料
                </a-button>
                </div>
                
              </div>
            <a-table :columns="columns2" :data-source="data2" bordered :pagination="false" class="margin-t20">
              <span slot="handle">
                <span class="red hover margin-r20">删除</span>
                <span class="blue hover">编辑</span>
              </span>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="6" tab="讨论">
            <a-textarea placeholder="输入评论..." :rows="4" />
            <a-button type="primary" style="margin-top: 10px;">发布</a-button>

            <a-list style="margin-top: 40px;" item-layout="horizontal" :data-source="listData">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-list-item-meta
                    :description="item.content"
                >
                  <div slot="title">{{ item.user }}</div>
                  <a-avatar
                      slot="avatar"
                      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                  />
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-tab-pane>

          <a-tab-pane key="7" tab="操作日志">
            <a-table :columns="columns4" :data-source="data4" bordered :pagination="false"></a-table>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
</template>

<script>
export default {
  name: "projectDetail",
  data(){
    return {
      filters1: [
        {
          title: '已完成',
          value: '1'
        },
        {
          title: '未完成',
          value: '2'
        },
        {
          title: '已超期',
          value: '3'
        },
        {
          title: '未开始',
          value: '4'
        },
      ],
      planList:[
          {
              title:"名称",
              name:"张三",
              createTime:"2021-03-09",
              endTime:"2021-03-09",
              progress:"64",
              description:"说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明"
          },
          {
              title:"名称",
              name:"张三",
              createTime:"2021-03-09",
              endTime:"2021-03-09",
              progress:"64",
              description:"说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明"
          },
          {
              title:"名称",
              name:"张三",
              createTime:"2021-03-09",
              endTime:"2021-03-09",
              progress:"64",
              description:"说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明"
          }
      ],
      columns: [
        {
          title: '项目名称',
          dataIndex: 'name',
          key: 'name',
          ellipsis: true,
        },
        {
          title: '项目负责人',
          dataIndex: 'person',
          key: 'person',
          ellipsis: true,
        },
        {
          title: '优先级',
          dataIndex: 'priority',
          key: 'priority',
          scopedSlots: { customRender: 'priority' },
        },
        {
          title: '紧急程度',
          dataIndex: 'urgency',
          key: 'urgency',
          scopedSlots: { customRender: 'urgency' },
        },
        {
          title: '项目进度',
          dataIndex: 'progress',
          key: 'progress',
          scopedSlots: { customRender: 'progress' },
        },
        {
          title: '项目类型',
          dataIndex: 'type',
          key: 'type',
          ellipsis: true,
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime',
          ellipsis: true,
          sorter: (a, b) => a.date - b.date
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          ellipsis: true
        },
      ],
      data: [
        {
          key: '1',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '高',
          urgency: '紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        },
        {
          key: '2',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '低',
          urgency: '紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        },
        {
          key: '3',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '高',
          urgency: '不紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        },
        {
          key: '4',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '高',
          urgency: '紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        }
      ],
      columns2: [
        {
          title: '文件名称',
          dataIndex: 'name',
          key: 'name',
          ellipsis: true,
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '说明',
          dataIndex: 'desc',
          key: 'desc',
          ellipsis: true,
        },
        {
          title: '所属',
          dataIndex: 'type',
          key: 'type',
          ellipsis: true,
        },
        {
          title: '操作人',
          dataIndex: 'operator',
          key: 'operator'
        },
        {
          title: '操作时间',
          dataIndex: 'time',
          key: 'time'
        },
        {
          title: '操作',
          dataIndex: 'handle',
          key: 'handle',
          scopedSlots: { customRender: 'handle' },
        },
      ],
      data2: [
        {
          key: '1',
          name: '需求报告.docx',
          desc: '说明说明说明说明',
          type: '合同:xxxxxxxxx',
          operator: '张三',
          time: '2021-03-06 18:22:20'
        },
        {
          key: '2',
          name: '需求报告.docx',
          desc: '说明说明说明说明',
          type: '合同:xxxxxxxxx',
          operator: '张三',
          time: '2021-03-06 18:22:20'
        },
        {
          key: '3',
          name: '需求报告.docx',
          desc: '说明说明说明说明',
          type: '合同:xxxxxxxxx',
          operator: '张三',
          time: '2021-03-06 18:22:20'
        },
        {
          key: '4',
          name: '需求报告.docx',
          desc: '说明说明说明说明',
          type: '合同:xxxxxxxxx',
          operator: '张三',
          time: '2021-03-06 18:22:20'
        },
        {
          key: '5',
          name: '需求报告.docx',
          desc: '说明说明说明说明',
          type: '合同:xxxxxxxxx',
          operator: '张三',
          time: '2021-03-06 18:22:20'
        },
        {
          key: '6',
          name: '需求报告.docx',
          desc: '说明说明说明说明',
          type: '合同:xxxxxxxxx',
          operator: '张三',
          time: '2021-03-06 18:22:20'
        }
      ],
      columns3: [
        {
          title: '月份',
          dataIndex: 'month',
          key: 'month'
        },
        {
          title: '收入',
          dataIndex: 'income',
          key: 'income'
        },
        {
          title: '支出',
          dataIndex: 'expend',
          key: 'expend'
        },
        {
          title: '收支差',
          dataIndex: 'dif',
          key: 'dif'
        }
      ],
      data3: [
        {
          key: '1',
          month: '1月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '2',
          month: '2月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '3',
          month: '3月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '4',
          month: '4月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '5',
          month: '5月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '6',
          month: '6月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '7',
          month: '7月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '8',
          month: '8月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '9',
          month: '9月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '10',
          month: '10月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '11',
          month: '11月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '12',
          month: '12月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '13',
          month: '总计',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        }
      ],
      listData: [
        {
          key: '1',
          user: '王浩然',
          content: '内容内容内容内容内容内容内容内容内容内容内容内容',
        },
        {
          key: '2',
          user: '李雷',
          content: '内容内容内容内容内容内容内容内容内容内容内容内容',
        },
        {
          key: '3',
          user: '韩梅梅',
          content: '内容内容内容内容内容内容内容内容内容内容内容内容',
        },
      ],
      columns4: [
        {
          title: '操作人',
          dataIndex: 'operator',
          key: 'operator'
        },
        {
          title: '操作时间',
          dataIndex: 'time',
          key: 'time'
        },
        {
          title: '操作类别',
          dataIndex: 'type',
          key: 'type'
        },
        {
          title: '动作',
          dataIndex: 'action',
          key: 'action'
        },
        {
          title: '历史值',
          dataIndex: 'history',
          key: 'history'
        },
        {
          title: '修改值',
          dataIndex: 'edit',
          key: 'edit'
        }
      ],
      data4: [
        {
          key: '1',
          operator: '张三',
          time: '2021-03-06 18:22:20',
          type: '项目名称',
          action: '编辑',
          history: '没有',
          edit: '哈哈哈啊哈',
        },
        {
          key: '2',
          operator: '张三',
          time: '2021-03-06 18:22:20',
          type: '项目名称',
          action: '编辑',
          history: '没有',
          edit: '哈哈哈啊哈',
        },
        {
          key: '3',
          operator: '张三',
          time: '2021-03-06 18:22:20',
          type: '项目名称',
          action: '编辑',
          history: '没有',
          edit: '哈哈哈啊哈',
        }
      ],
      columns5: [
        {
          title: '里程碑名称',
          dataIndex: 'name',
          key: 'name',
          ellipsis: true,
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '负责人',
          dataIndex: 'desc',
          key: 'desc',
          ellipsis: true,
        },
        {
          title: '完成时间',
          dataIndex: 'type',
          key: 'type',
          ellipsis: true,
        },
        {
          title: '状态',
          dataIndex: 'operator',
          key: 'operator'   
        },
        {
          title: '交付物',
          dataIndex: 'time',
          key: 'time'
        },
      ],
      data5: [
        {
          key: '1',
          name: '需求分析',
          desc: '张三',
          type: '2016-03-05',
          operator: '未完成',
          time: '3/5'
        },
        {
          key: '2',
          name: '系统设计',
          desc: '张三',
          type: '2016-03-05',
          operator: '未完成',
          time: '3/5'
        },
        {
          key: '3',
          name: '测试',
          desc: '张三',
          type: '2016-03-05',
          operator: '未完成',
          time: '3/5'
        },
        {
          key: '4',
          name: '设计',
          desc: '张三',
          type: '2016-03-05',
          operator: '未完成',
          time: '3/5'
        },
        {
          key: '5',
          name: '验收',
          desc: '张三',
          type: '2016-03-05',
          operator: '未完成',
          time: '3/5'
        },
      ],
    }
  },
  mounted(){

  },
  methods: {
    onChange(date, dateString) {
        console.log(date, dateString);
    },
  }
}
</script>

<style lang="scss" scoped>

    .aTag{
        margin:10px 0;
        word-wrap:break-word;
        width:100%;
        white-space:break-spaces;
        box-sizing: border-box;
        padding: 10px;
    }
</style>
